<template>
	<hyb-page title="商家列表">


		<template v-slot:top>
			<view class=" gui-padding-small gui-bg-white gui-flex gui-align-items-center">
				<view style="width: 210rpx;">
					<hyb-city :onlyRegion="true" v-model="district"></hyb-city>
				</view>
				<view class="gui-flex1 gui-flex gui-align-items-center gui-bg-white gui-border gui-bg-gray"
					style="padding: 10rpx 16rpx;margin-left: 40rpx;border-radius: 40rpx;">
					<input class="gui-flex1 gui-text gui-text-small" v-model="s_name" style="margin-left: 10rpx;"
						placeholder="请输入搜索" />
					<text @tap="query(1)" class="gui-block gui-color-white  gui-text-small"
						style="margin-left: 10rpx;padding: 5rpx 16rpx; border-radius: 40rpx;"
						:style="{background:base.qjcolor}">搜索</text>
				</view>
			</view>


			<!-- <view class="gui-bg-gray gui-flex">
				<view class="gui-flex gui-flex1 gui-align-items-center gui-bg-white gui-margin"
					style="padding: 10rpx 16rpx;margin-left: 40rpx;border-radius: 40rpx;">
					<input v-model="s_name" class="gui-flex1 gui-text" style="margin-left: 10rpx;"
						placeholder="请输入商家或服务名称" />
					<text @tap="query(1)" class="gui-block gui-color-white  gui-text"
						style="margin-left: 10rpx;padding: 5rpx 16rpx; border-radius: 40rpx;"
						:style="{background:base.qjcolor}">搜索</text>
				</view>
			</view> -->
		</template>


		<template v-slot:body>
			<view style="height: 80rpx;"></view>


			<view>
				<hyb-grid :width="90" class="gui-margin-top-small" :items="tops" :keys="['thumb','title']"
					@item_click="goto"></hyb-grid>
			</view>


			<view class="gui-padding" v-if="tag==1">

				<view @tap="choose(item)"
					class="gui-list-items gui-bg-white gui-padding-x gui-border-radius-large gui-margin-top"
					v-for="(item,index) in list" :key="index">
					<gui-image :width="130" :height="130" mode="aspectFit" :src="item.s_thumb"
						class="js-icon img-radius">
					</gui-image>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<view class="gui-text gui-primary-text gui-ellipsis"
								:class="tag==0?['gui-flex','gui-space-between','gui-flex1']:''">
								<text>{{item.s_name}}</text>
								<text class="gui-text-small gui-color-red bold gui-margin-left"
									v-if="item.distance != null">距我{{item.distance}}公里</text>
							</view>
						</view>
						<view class="gui-list-body-desc gui-margin-top-small">
							<view>地址：{{item.s_address}}{{item.s_xxaddress}}</view>
						</view>

					</view>

					<!-- <view class="js-status gui-text-small gui-text-center gui-border-radius">可约</view> -->
					<!-- <view @tap="choose(item)"
						class="jis-select gui-bg-red gui-color-white gui-text-center gui-text gui-border-radius gui-margin-left"
						style="padding: 5rpx 16rpx;">选择</view> -->

				</view>
			</view>



			<view class="gui-padding" v-else>
				<hyb-empty v-if="list.length==0" style="margin-top: 200rpx;"></hyb-empty>
				<view v-for="(item,index) in list" :key="index"
					class="gui-bg-white gui-border-radius-large gui-padding-x gui-margin-top-small">
					<view class="gui-list-items" @click="to(item.s_id)">
						<image style="width: 130rpx;height: 130rpx;" mode="aspectFill" :src="item.s_thumb"
							class="img-radius">
						</image>
						<view class="gui-list-body">
							<view class="gui-list-title">
								<view class="gui-text gui-primary-text gui-ellipsis gui-align-items-center"
									:class="['gui-flex','gui-space-between','gui-flex1']">
									<text class="gui-ellipsis">{{item.s_name}}</text>
									<text class="gui-list-body-desc gui-color-red gui-margin-left gui-flex-shrink0"
										v-if="item.distance != null">距我{{item.distance}}公里</text>
								</view>
							</view>
							<view class="gui-list-body-desc gui-margin-top">
								<view class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1">
									<view>好评：</view>
									<gui-star :activecolor="base.qjcolor" fontSize="30rpx" :totalstars="5" :starnum="5"
										:cantap="false"></gui-star>
								</view>

								<view
									class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1 gui-margin-top-middle"
									v-if="item.label">
									<view>标签：</view>
									<gui-tags :size="20" v-for="(item,index) in item.label.splice(0,2)" :text="item"
										:customClass="['gui-bg-red','gui-color-white','gui-ellipsis']"></gui-tags>
								</view>

								<!-- 	<view
									class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1 gui-margin-top-middle">
									<view>订单数：{{item.order_count}}</view>
									<view></view>
								</view> -->

								<view
									class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1 gui-margin-top-middle">
									<view>地址：{{item.s_address}}</view>
									<view></view>
								</view>
							</view>


						</view>
					</view>

					<view v-if="from != 'manage' && item.fuwus && item.fuwus.length>0"
						class="gui-flex gui-border-t gui-padding-y">
						<view @tap="nav(fuwu.x_id)" style="width: 200rpx;" :style="{'margin':index0==1?'0 20rpx':''}"
							class="gui-bg-gray gui-flex gui-column gui-border-radius-large"
							v-for="(fuwu,index0) in getLatestFuwus(item.fuwus)" :kye="index0">
							<image :src="fuwu.x_thumb" style="width: 200rpx; height: 200rpx;" class="img-radius">
							</image>
							<view class="gui-flex gui-column gui-space-between gui-flex1 gui-padding-small">
								<view class="gui-bold gui-list-body-desc gui-ellipsis">{{fuwu.x_name}}</view>
								<view class="gui-list-body-desc"><text
										class="gui-color-red  gui-bold">￥{{fuwu.x_jiage}}</text>
									<text class="gui-color-gray gui-line-through">￥{{fuwu.x_yjiage}}</text>
								</view>
							</view>
						</view>
					</view>


					<view v-if="item.goods && item.goods.length>0" class="gui-flex gui-border-t gui-padding-y">
						<view @tap="nav1(fuwu.g_id)" style="width: 200rpx;" :style="{'margin':index0==1?'0 20rpx':''}"
							class="gui-bg-gray gui-flex gui-column gui-border-radius-large"
							v-for="(fuwu,index0) in getLatestGoods(item.goods)" :kye="index0">
							<image :src="fuwu.g_thumb" style="width: 200rpx; height: 200rpx;" class="img-radius">
							</image>
							<view class="gui-flex gui-column gui-space-between gui-flex1 gui-padding-small">
								<view class="gui-bold gui-list-body-desc gui-ellipsis">{{fuwu.g_name}}</view>
								<view class="gui-list-body-desc"><text
										class="gui-color-red  gui-bold">￥{{fuwu.g_jiage}}</text>
									<text class="gui-color-gray gui-line-through">￥{{fuwu.g_yjiage}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view style="height: 160rpx;"></view>
			<view v-if="userinfo.is_admin" style="position: fixed;bottom: 40rpx;left: 40rpx;right: 40rpx;">
				<hyb-button icon="&#xe6c7;" @tap="toAdd()" label="添加商家"></hyb-button>
			</view>
		</template>

	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				tag: 0,
				tag_name: '',
				list: [],
				page: 1,
				s_name: "",
				last_page: 1,
				district: "",
				from: "",
				tops: [],
				type: '',
				sj_type: '',
				xt_id: null,
				g_type: null
			}
		},

		computed: {
			base: () => {
				return uni.storage.get("base")
			},
			userinfo: function() {
				return this.$store.state.userinfo
			}
		},

		onLoad(options) {
			if (options.tag) {
				this.tag = options.tag;
			}
			if (options.tag_name) {
				this.tag_name = options.tag_name;
			}

			if (options.from) {
				this.from = options.from;
			}

			if (options.search) {
				this.s_name = options.search;
			}


			if (options.type) {
				this.type = options.type;
			}
			if (options.sj_type) {
				this.sj_type = options.sj_type;
			}

			this.query_type()

			this.query();
		},

		onReachBottom() {
			if (this.page < this.last_page) {
				this.query()
			}
		},


		methods: {
			goto(info) {
				if (this.type === 'goods') {
					this.g_type = info.id
					this.xt_id = null
				} else {
					this.xt_id = info.id
					this.g_type = null
				}
				this.query(1)
			},

			toAdd() {
				uni.navigateTo({
					url: '/hyb_o2o/shangjia/add/add'
				})
			},

			choose(info) {
				uni.$emit("choose_shangjia", {
					s_id: info.s_id,
					name: info.s_name
				})
				uni.navigateBack();
			},

			query_type() {
				const tops = [];
				if (this.type == 'goods') {
					uni.gPost("goods/styles", {
						tag_name: this.tag_name
					}).then((list) => {

						list.forEach((item) => {
							item.children.forEach((item1) => {
								tops.push(item1)
							})
						})
						this.tops = tops
					})

				} else {
					uni.gPost("fuwu/type/list", {
						tag_name: this.tag_name
					}).then(list => {

						list.forEach((item) => {
							item.children.forEach((item1) => {
								item1.checked = false;
								tops.push({
									id: item1.xt_id,
									title: item1.xt_name,
									thumb: item1.xt_thumb,
								})
							})
						})
						this.tops = tops
					})
				}
			},
			async query(page) {
				if (page) this.page = page;
				if (this.page == 1) {
					this.list = [];
				}
				let location = await uni.location.getLocation();
				uni.gPost("shangjia/list", {
					g_type: this.g_type,
					sj_type: this.sj_type,
					xt_id: this.xt_id,
					district: this.district,
					location: location,
					s_rz: 1,
					s_name: this.s_name,
					page: this.page,
					city: this.$store.state.city
				}).then((res) => {
					this.last_page = res.last_page;
					this.list = this.list.concat(res.data);
				})
			},

			nav(id) {
				uni.navigateTo({
					url: "/hyb_o2o/addpages/pages/detail/detail?id=" + id
				})
			},
			nav1(id) {
				uni.navigateTo({
					url: "/hyb_o2o/subpagesA/pages/goods/goods?id=" + id
				})
			},

			to(id) {
				if (this.from == 'manage') {
					uni.showActionSheet({
						itemList: ['查看', '修改'],
						success: (res) => {
							if (res.tapIndex == 1) {
								uni.navigateTo({
									url: "/hyb_o2o/shangjia/add/add?id=" + id
								})
							} else {
								uni.navigateTo({
									url: "/hyb_o2o/shangjia/info/info?id=" + id
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/hyb_o2o/shangjia/info/info?id=" + id
					})
				}
			},

			// 获取最新上传的3个服务
			getLatestFuwus(fuwus) {
				if (!fuwus || fuwus.length === 0) return [];
				// 按创建时间排序，最新的在前，然后取前3个
				return fuwus
					.sort((a, b) => {
						const timeA = new Date(a.created_at || a.x_time || 0);
						const timeB = new Date(b.created_at || b.x_time || 0);
						return timeB - timeA;
					})
					.slice(0, 3);
			},

			// 获取最新上传的3个商品
			getLatestGoods(goods) {
				if (!goods || goods.length === 0) return [];
				// 按创建时间排序，最新的在前，然后取前3个
				return goods
					.sort((a, b) => {
						const timeA = new Date(a.created_at || a.g_time || 0);
						const timeB = new Date(b.created_at || b.g_time || 0);
						return timeB - timeA;
					})
					.slice(0, 3);
			}
		}
	}
</script>

<style>
	/* 自定义吸顶元素样式 */
	.js-icon {
		border-radius: 50%;
	}

	.js-status {
		border: 1rpx solid red;
		color: red;

	}

	.img-radius {
		border-radius: 16rpx !important;
	}
</style>